<style>
  .picImg{
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <!--<div class="filter-container">-->
      <!--<el-input v-model="listQuery.orderId" clearable class="filter-item" style="width: 200px;" placeholder="请输入订单编号"/>-->
      <!--<el-select v-model="listQuery.orderStatusArray" multiple style="width: 200px" class="filter-item"-->
                 <!--placeholder="请选择">-->
        <!--<el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value"/>-->
      <!--</el-select>-->
      <!--<el-button v-permission="['GET /admin/order/list']" class="filter-item" type="primary" icon="el-icon-search"-->
                 <!--@click="handleFilter">查找-->
      <!--</el-button>-->
    <!--</div>-->

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

      <el-table-column align="center" min-width="100" label="银行编码" prop="bankCode"/>
      <el-table-column align="center" min-width="100" label="银行名称" prop="bankName"/>
      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['GET /admin/order/detail']" type="primary" size="mini"
                     @click="handleDetail(scope.row)">详情
          </el-button>
          <el-button v-permission="['POST /admin/order/ship']" v-if="scope.row.orderStatus==0" size="mini" type="primary"
                     @click="handleShip(scope.row)">分配
          </el-button>
          <el-button v-permission="['POST /admin/order/ship']" v-if="scope.row.orderStatus==0" size="mini" type="primary"
                     @click="handleCance(scope.row)">取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"/>
    <!-- 订单详情对话框 -->
    <el-dialog :visible.sync="orderDialogVisible" title="订单详情" width="800">
      <el-form :data="orderDetail" label-position="left">
        <el-form-item label="订单图片">
          <img :src="orderDetail.order.images" alt="">
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orderDialogVisible = false">确定</el-button>
      </span>
    </el-dialog>

    <!-- 分配订单对话框 -->
    <el-dialog :visible.sync="shipDialogVisible" title="分配订单">
      <div class="block" v-if="shipForm.orderType==5" style="margin-bottom: 20px">
        <el-date-picker
          v-model="shipForm.scheduledDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择预约日期">
        </el-date-picker>
        <el-time-select
          v-model="shipForm.scheduledTime"
          :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30'
             }"
          placeholder="选择预约时间">
        </el-time-select>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="deliverListLoading" :data="deliverList" element-loading-text="正在查询中。。。" border fit
                highlight-current-row>
        <el-table-column align="center" label="配送员名称" prop="username"/>
        <el-table-column align="center" label="配送员手机号" prop="phone"/>
        <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini"
                       @click="doOrderShip(scope.row)">分配
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="deliverTotal>0" :total="deliverTotal" :page.sync="listQueryDeliver.page"
                  :limit.sync="listQueryDeliver.limit" @pagination="getDeliverList"/>
    </el-dialog>
  </div>
</template>

<script>
  import { detailOrder, listOrder, refundOrder, shipOrder, cancelOrder } from '@/api/order'
  import { listDeliver } from '@/api/deliver'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import checkPermission from '@/utils/permission' // 权限判断函数
  export default {
    name: 'bank',
    components: { Pagination },
    filters: {

    },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
        },
        orderDetail: {
          order: {},
          addressOrder: {},
          orderGoods: [],
          orderFeedbacks: []
        },
        shipForm: {
          orderId: undefined,
          shipChannel: undefined,
          shipSn: undefined
        },
        shipDialogVisible: false,
        refundForm: {
          orderId: undefined,
          refundMoney: undefined
        },
        refundDialogVisible: false,
        downloadLoading: false
      }
    },
    created() {
      this.getList()
      this.getDeliverList()
    },
    methods: {
      checkPermission,
      getList() {
        this.listLoading = true
        listOrder(this.listQuery).then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
      getDeliverList() {
        this.listLoading = true
        listDeliver(this.listQueryDeliver).then(response => {
          this.deliverList = response.data.data.list
          this.deliverTotal = response.data.data.total
          this.deliverListLoading = false
        }).catch(() => {
          this.deliverList = []
          this.deliverTotal = 0
          this.deliverListLoading = false
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleCance(row) {
        cancelOrder({ orderId: row.orderId }).then(response => {
          let index = this.list.indexOf(row)
          this.list[index].orderStatus = 4
        })
      },
      handleDetail(row) {
        detailOrder(row.orderId).then(response => {
          console.log(JSON.stringify(response.data))
          this.orderDetail = response.data.data
        })
        this.orderDialogVisible = true
      },
      handleShip(row) {
        this.shipForm.orderId = row.orderId
        this.shipForm.orderType = row.orderType
        this.shipForm.index = this.list.indexOf(row)
        this.shipForm.shipChannel = row.shipChannel
        this.shipForm.shipSn = row.shipSn
        this.shipDialogVisible = true
      },
      handleRefund(row) {
        this.refundForm.orderId = row.orderId
        this.refundForm.refundMoney = row.actualPrice

        this.refundDialogVisible = true
        this.$nextTick(() => {
          this.$refs['refundForm'].clearValidate()
        })
      },
      doOrderShip(row) {
        if (this.shipForm.orderType == 5) {
          if (!this.shipForm.scheduledDate || !this.shipForm.scheduledTime) {
            this.$notify.error({
              title: '失败',
              message: '预约日期或预约时间不能为空'
            })
            return
          }
        }
        var sendJSON = {}
        sendJSON.orderId = this.shipForm.orderId
        sendJSON.scheduledDate = this.shipForm.scheduledDate
        sendJSON.scheduledTime = this.shipForm.scheduledTime
        sendJSON.deliverId = row.userId
        shipOrder(sendJSON)
          .then(response => {
            this.list[this.shipForm.index].orderStatus = '1'
            this.dialogFormVisible = false
            this.$notify.success({
              title: '成功',
              message: '设置配送员成功'
            })
            this.shipDialogVisible = false
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      },
      handleDownload() {
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['订单ID', '订单编号', '用户ID', '订单状态', '是否删除', '收货人', '收货联系电话', '收货地址']
          const filterVal = ['id', 'orderSn', 'userId', 'orderStatus', 'isDelete', 'consignee', 'mobile', 'address']
          excel.export_json_to_excel2(tHeader, this.list, filterVal, '订单信息')
          this.downloadLoading = false
        })
      },
      printOrder() {
        // this.$print(this.$refs.print)
        this.orderDialogVisible = false
      }
    }
  }
</script>
